RetoolでDynamoDBのデータを積み上げ棒グラフにしてみた
はじめに
CX事業本部IoT事業部の佐藤智樹です。
今回はAWSなどのサービスと連携して簡単にグラフやボタンなどのアプリケーションが作れるRetoolを使って、DynamoDBのデータを積み上げ棒グラフにしてました。これからRetoolでグラフを作成したい方には参考になるかと思うので良ければ参考にしてください。
前提条件
DynamoDBとの連携
DynamoDBへの接続用設定などは済んでいる前提で進めます。方法が気になる場合は弊社の以下の記事か公式ドキュメントをご確認ください。公式例のポリシーの権限が全テーブルなので気になる方はListTablesだけリソースを * にして他のアクションはリソースを絞れば権限を減らせます。
実践
全体の流れとしては、まずDynamoDBのテーブルを作成しデータを投入。Retoolでデータを読み込みグラフかしていきます。
DynamoDBのテーブル作成
以下の形式のテーブルを作成してください。今回はDynamoDBへはScanしか使わないので別のハッシュキー、ソートキーでも問題ないです。データ量が多くなる場合はDynamoDBからデータを抽出する速度をあげるためキーやインデックスの設計が必要になることはご留意ください。
| 項目名 | 値 |
|---|---|
| テーブル名 | RETOOL_SAMPLE |
| ハッシュキー | id |
| ソートキー | createdAt |
DynamoDBにデータ投入
次に作ったテーブルへバラバラに何件かデータを投入します。今回は何らかのアンケートに回答があった想定で投入します。AWS CLIの dynamodb batch-write-item を使って複数件を何度か投入します。
{
"RETOOL_SAMPLE": [
{
"PutRequest": {
"Item": {
"id": {
"S": "tenantA"
},
"createdAt": {
"N": "100"
},
"date": {
"S": "2010-03-01"
},
"answer": {
"S": "1"
}
}
}
},
{
"PutRequest": {
"Item": {
"id": {
"S": "tenantA"
},
"createdAt": {
"N": "101"
},
"date": {
"S": "2010-03-01"
},
"answer": {
"S": "2"
}
}
}
}
]
}
% aws dynamodb batch-write-item --request-items file://sample.json
RetoolでDynamoDBのデータを読み込む
Retoolの管理ページから「Create New」ボタンで空のアプリケーションを作成します。
画面下部の「Resource」周りの部分を以下の画像のように変更します。
以下の画像にある「Run」ボタンをクリックして、「Query run successfully」と表示されれば抽出は完了です。
Retoolでグラフを描画
グラフ化する前にDynamoDBのデータのままだとrawDataやItemsなどの記載が含まれ、クエリが長くなるので一度テーブルへデータを展開します。画面右側の「Components」から「Table」をMainエリアに向けてドラッグ&ドロップします。自然と抽出したクエリの内容が表示されます。
最後に抽出したデータから積み上げ棒グラフを作成します。まずは画面右側の「Components」から「Chart」をMainエリアに向けてドラッグ&ドロップします。
画面右に出るグラフに関する設定を以下のように画面から変更します。画像は記入する部分だけ赤枠で囲っています、他にも変更部分はあるので全部が同じになるよう設定してください。ドラッグ&ドロップすると最初はDatasetsが大量に表示されますが全て削除してください。
| 項目 | テキスト |
|---|---|
| Data source | {{table1}} |
| X-axis values | {{formatDataAsObject(table1.data).date}} |
| Group by | {{formatDataAsObject(table1.data).answer}} |
| Datasets name | answer |
| Datasets values | {{formatDataAsObject(table1.data).answer}} |
| Datasets aggregation method | Count |
上記が完了すると以下のように日付ごとの回答結果の比率を確認するグラフが作成できます。
おまけ：作成したアプリの設定をJSONで出力
作成したアプリケーションはEnterPriseプランならGitと連携して管理が可能ですが、他のプランでもJSON形式で設定を抽出することができます。画面右上の三点リーダーボタンから抽出できます。
抽出した情報は以下のようなJSONになっています。 appState部分に設定した条件などが含まれて出力されます。
{
"uuid": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx",
"page": {
"id": 1000000,
"data": {
"appState": "[\"~#iR\",...(アプリに設定した情報が入る)]"
},
"changesRecord": [
{
"type": "WIDGET_REPOSITION2",
"payload": {
"moves": [
{ "move": { "col": 0, "row": 0, "width": 4, "height": 0 }, "moveType": "resize", "widgetIds": ["chart1"] }
],
"largeScreen": true
},
"hideChangelogEntry": false
}
],
"gitSha": null,
"checksum": null,
"createdAt": "2021-08-29T08:06:20.452Z",
"updatedAt": "2021-08-29T08:06:20.452Z",
"pageId": 100000,
"userId": 100000,
"branchId": null
},
"modules": {}
}
所感
少しクエリの組み方にクセがありますが単純クエリでDBデータを取得して集約してグラフ化やその他の機能を含めてアプリ化してPoCをする場合に役立つツールかと思います。またGUIで作業は完結しますがSQLの考え方を理解する必要があるので、ノーコードではなくプログラマがスピード重視で使うローコードツールという印象です。
フロントアプリを自分たちで作り込まずにアプリとして現場に投入して試したい場合に有用な気がします。今後もRetoolに関する記事や動画を定期的に上げていくので気になったら触ってみてください。
